<template>
  <div class="detail">
    <nav-bar class="detailnav">
      <template #left>
        <div class="left" @click="backhome">
          <img src="../../../assets//img/detail/back.png" alt="" />
        </div>
      </template>
      <template #center>
        <div
          class="fontitem"
          :class="{ active: currentindex === index }"
          v-for="(item, index) in titles"
          :key="item"
          @click="changecurrentindex(index)"
        >
          {{ item }}
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

import NavBar from 'comps/common/navbar/NavBar.vue'

export default {
  components: {
    NavBar
  },
  setup(props, _) {
    const router = useRouter()
    const titles = reactive(['商品', '参数', '评论', '推荐'])
    const currentindex = ref(0)
    const backhome = () => {
      router.back()
    }
    const changecurrentindex = (index) => {
      currentindex.value = index
      _.emit('changetabs', index)
    }
    return {
      currentindex,
      titles,
      backhome,
      changecurrentindex
    }
  }
}
</script>

<style lang="less" scoped>
.detailnav {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  .left {
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .fontitem {
    font-size: 13px;
  }
}
.active {
  color: deeppink;
}
</style>
